<template>
  <div>
    <el-dialog
      :visible.sync="dialogVisible"
      :before-close="handleClose"
    >
      <span slot="title">添加秒杀活动</span>
      <el-form
        ref="form"
        :model="form"
        label-width="80px"
      >
        <el-form-item label="活动名称">
          <el-input v-model="form.activityName"></el-input>
        </el-form-item>
        <el-form-item label="开始日期">
          <el-date-picker
            v-model="form.startTime"
            type="datetime"
            placeholder="选择日期时间"
            value-format="yyyy-MM-dd "
          ></el-date-picker>
        </el-form-item>
        <el-form-item label="结束日期">
          <el-date-picker
            v-model="form.endTime"
            type="datetime"
            placeholder="选择日期时间"
            value-format="yyyy-MM-dd "
          ></el-date-picker>
        </el-form-item>
      </el-form>
      <div style="display: flex;justify-content: space-between;">
        <span>秒杀时间段</span>
        <div class="btn-group">
          <el-button
            type="primary"
            @click="addTime1"
          >固定时间段</el-button>
          <el-button
            type="primary"
            @click="safeSetTime"
          >自定义时间段</el-button>
          <div style="display: inline-block;" v-if="stateTime==true">
            <span>时间间隔：</span>
            <el-input
              style="display: inline-block;width: 100px"
              v-model="time"
              type="number"
            ></el-input>
            <span>小时</span>
            <el-button style="margin-left: 10px;width: 70px;font-size: 14px; height: 40px;" type="primary">生成</el-button>
          </div>
          <div style="display: inline-block;" v-if="!stateTime==true">
            <el-button @click ="showAddDailog" style="margin-left: 10px;" type="text">添加时间段</el-button>
          </div>
        </div>
      </div>
      <div>
        <el-table
          :data="tableData"
          style="width: 100%"
        >
          <el-table-column
            prop="timeName"
            label="时间端名称"
          ></el-table-column>
          <el-table-column
            prop="startTime"
            label="开始时间"
          ></el-table-column>
          <el-table-column
            prop="endTime"
            label="结束时间"
          ></el-table-column>
          <el-table-column
            prop="limit"
            label="商品上限"
          ></el-table-column>
          <el-table-column label="操作">
            <template slot-scope="scope">
              <el-button
                type="text"
                @click="handleDelete(scope.$index)"
              >删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>

      <div
        slot="footer"
        class="dialog-footer"
      >
        <el-button @click="handleClose">取 消</el-button>
        <el-button
          type="primary"
          @click="handleSubmit"
        >确 定</el-button>
      </div>
    </el-dialog>
    <add-time v-if="showadd === true" :show.sync="showadd" @close="getclose"></add-time>
  </div>
</template>

<script>
import AddTime from './AddTime.vue';
export default {
  components: { AddTime },
  name: "AddSecKillding",
  props: {
    Visable: {
      type: Boolean,
      default: false,
    },
  },
  watch: {
    Visable: {
      handler(newVal) {
        this.dialogVisible = newVal;
      },
      immediate: true,
      deep: true,
    },
  },
  data() {
    return {
      dialogVisible: this.Visable,
      showadd:false,
      tableData: [
        {
          timeName: "8:00",
          startTime: "8:00",
          endTime: "9:00",
          limit: 100,
        },
        {
          timeName: "10:00",
          startTime: "10:00",
          endTime: "11:00",
          limit: null,
        },
      ],
      form: {
        activityName: "",
        startTime: "",
        endTime: "",
      },
      stateTime: true,
      time: 1,
    };
  },
  created() {
    console.log("创建");
    //this.addTime();
  },
  methods: {
    handleClose() {
      this.dialogVisible = false;
      this.$emit("close", false);
    },
    addTime1() {
      this.stateTime = true;
    },
    safeSetTime() {
      this.stateTime = false;
    },
    handleDelete(data) {
      // this.tableData.splice(data, 1);
      this.$confirm("此操作将永久删除该时间段, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        this.tableData.splice(data, 1);
        this.$message({
          type: "success",
          message: "删除成功!",
        });
      }).catch(() => {
        this.$message({
          type: "info",
          message: "已取消删除",
        });
      });
    },
    handleSubmit() {
      console.log("提交");
    },
    showAddDailog(){
        console.log("显示添加时间段");
        this.showadd=true;
        console.log(this.showadd);
    },
    getclose(data){
        console.log("关闭添加时间段");
        this.showadd=false;
        this.stateTime=false;
    },
    showaddTime(){
        return this.showadd;
    }
  },
};
</script>

<style>
.btn-group el-button:hover {
    background-color: red;
}
</style>